<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../ali/iconfont.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/queue.css"/>
		<script type="text/javascript" src="../common/js/jquery.js?01_38"></script>
		
		<!--插件-->
		<script type="text/javascript" src="../common/js/vue.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/update.js?01_38"></script>
		
		<script type="text/javascript" src="../common/js/common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/fastclick.js?01_38"></script>
		<script type="text/javascript" src="../common/js/main.js?01_38"></script>
		<script type="text/javascript" src="../common/js/app.js?01_38"></script>
	</head>
	<body>
		<!--头部-->
		<header class="bg-red9 fff f-20 pad-t-10 pad-b-10 pad-r-10">
			<div class="pa back pad-l-10 back re"  onclick="backpre()">
				<div class="order_back"></div>
				<a></a>
			</div>
			<div @click="test()" class="center header_title"></div>
			<!--<div class="pa set">
				<a href="queue_set.html" class="fff f-15 pad-r-10"><i></i></a>
			</div>-->
		</header>
		<div id="app" v-cloak="">
			<div class="wrap_body queue_details queue_printSetup bg-e4">
				
				<!--内容部分-->
				<div class="pad-t-45">
					<div class="pad-12">
						<div class="bg-fff pr">
							<div class="pa bg l_top"></div>
							<div class="pad-l-5 pad-r-5 f-12">
								<div class="center pad-t-15 pad-b-15 bd">
									<div class="c999 f-12">{{b_lg['1458']}}</div> 
									<div class="pad-t-10 f-15">{{detailsObj.shop_name}}</div> 
								</div>
								<div class="bd center pr mag-t-20">
									<div class="pa fff sign">
										<div class="queuing pad-5 pad-l-15 pad-r-15" v-if="detailsObj.status == 1">{{b_lg['1459']}}</div>
										<div class="eat pad-5 pad-l-15 pad-r-15" v-else-if="detailsObj.status == 2">{{b_lg['1453']}}</div>
										<div class="done pad-5 pad-l-15 pad-r-15" v-else-if="detailsObj.status == 3">{{b_lg['1454']}}</div>
									</div>
									<div class="pad-b-15">
										<div class="f-36 f-b">{{detailsObj.letter}}{{detailsObj.sn_text}}</div>
										<div class="f-12 c999" v-if="q_id">{{q_id}}{{name}}（{{count1}}-{{count2}}人）</div>
										<div class="f-12 c999" v-if="q_id">{{b_lg['1501']}}</div>
										<div class="red9 pad-t-10 pad-b-10 f-15" v-if="detailsObj.status == 1">{{b_lg['1460']}} {{detailsObj.ranking}} {{b_lg['1461']}}</div>
										<div class="f-12 c999" v-if="detailsObj.status == 3">{{detailsObj.addtime}} {{b_lg['1101']}}</div>
										<div class="f-12 c999" v-else-if="detailsObj.status == 1">{{detailsObj.addtime}} {{b_lg['1101']}}</div>
										<div class="f-12 c999" v-show="detailsObj.times>0">{{b_lg['1462']}} {{detailsObj.times}}{{b_lg['1463']}}，{{b_lg['1464']}} {{detailsObj.times_cont}}</div>
									</div>
								</div>
								<div class="bd pad-15 f-12">
									<div class="pad-t-5 pad-b-5" v-if="detailsObj.mobile">{{b_lg['1465']}}{{detailsObj.mobile}}</div>
									<div class="pad-t-5 pad-b-5" v-else>{{b_lg['1465']}}{{b_lg['1466']}}</div>
									<div class="pad-t-5 pad-b-5">{{b_lg['1467']}}{{detailsObj.count}}人</div>
									<div class="pad-t-5 pad-b-5 fiex" style="align-items: flex-start;">
										<div>{{b_lg['1468']}}</div>
										<div class="fiex1">{{detailsObj.shop_address}}</div>
									</div>
									<div class="pad-t-5 pad-b-5">{{b_lg['1469']}}{{detailsObj.shop_mobile}}</div>
								</div>
								
								<div>
									<p class="pad-12 pad-t-15">{{b_lg['1470']}}</p>
									<p class="pad-l-12 pad-r-12 fiex blue pad-b-10"><i class="i mag-r-7"></i>{{detailsObj.description}}</p>
									<div class="pad-b-20" v-if="detailsObj.ticket">
										<div class="code"><img :src="'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + detailsObj.qr_ticket" alt="" /></div>
									</div>
								</div>
								<div v-else></div>
							</div>
							<div class="pa bg l_bot"></div>
							<div class="pa bg l_top"></div>
							<div>
								<div class="fiex center pad-t-20 pad-l-12 pad-r-12 btn_wrap">
									<div class="btn red9 pad-t-15 pad-b-15" v-bind:style="{ width:btnWidth }"  @click="printPage(detailsObj.q_id,detailsObj.sn)" v-if="detailsObj.status == 1">
										<i class="bg d_01 mag-r-7 pr"></i>{{b_lg['1234']}}
									</div>
									<div class="btn" @click="choose($event)" v-show="detailsObj.mobile != '' ">
										<a :href="'https://api.whatsapp.com/send?phone='+mobile" class="bk red9 pad-t-15 pad-b-15">
											<i class="bg d_02 mag-r-7 pr"></i>{{b_lg['1471']}}
										</a>
									</div>
								</div>
								<div class="fiex center pad-t-20 pad-b-20 pad-l-12 pad-r-12 btn_wrap btn_wrap_02 pr">
									
									<div class="btn pad-t-10 pad-b-15 bg-dblue pr" @click="callNumber(detailsObj.q_id,detailsObj.sn,detailsObj)" v-show="detailsObj.status == 1">
										<span class="blue pa num bg-fff f-12" v-show="detailsObj.times>0">{{detailsObj.times}}</span>
										<i class="bg d_03 mag-r-5 pr"></i>{{b_lg['1443']}}
									</div>
									<div class="btn pad-t-10 pad-b-15 bg-yellow" @click="dinner(detailsObj.q_id,detailsObj.id,detailsObj.sn,detailsObj)" v-show="detailsObj.status == 1 || detailsObj.status == 3">
										<i class="bg d_04 mag-r-5 pr"></i>{{b_lg['1449']}}
									</div>
									<div class="btn pad-t-10 pad-b-15 bg-red9" @click="passNumber(detailsObj.q_id,detailsObj.id,detailsObj.sn,detailsObj)" v-show="detailsObj.status == 1">
										<i class="bg d_05 mag-r-5 pr"></i>{{b_lg['1450']}}
									</div>
									<div class="btn pad-t-10 pad-b-15 bg-999" @click="revocation(detailsObj.id,detailsObj)" v-show="detailsObj.status == 3 || detailsObj.status == 2">
										<i class="bg d_06 mag-r-5 pr"></i>{{b_lg['1456']}}
									</div>
								</div>
							</div>
							<div class="pa bg l_bot"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		function backpre () {
			if(isAPP) {
				var preUrl = plus.webview.currentWebview().opener();
				preUrl.evalJS("refresh()");
			}
			com_back();
		}
		//下拉刷新
		function refresh () {
			app.init();
		}
		//webSocket
		function webSocketDetails () {
			app.init();
		}
		var app = null;
		function fun1 () {
			down_load(); //下拉刷新开启
			
			var lg = getItem('lg');
			var queue_details = JSON.parse(getItem("queue_details"));
			var pageflag = getItem("pageflag");
			setItem("id",getItem("queue_details").v);
			app = new Vue({
				el:"#app",
				data:{
					b_lg: global_lange, //语言包
					mobile:"",//店家手机号
					address:"",//店家地址
					btnWidth:"",//打印按钮的宽度
					callNumberTime:"",//叫号时间
					detailsObj:{},//当前排队信息
					table_info_list:{},//当前排队的桌子分类信息
					count:"",//当前排队总数量
					count1:"",//范围1
					count2:"",//范围2
					name:"",//桌类名
					id:"",
					q_id:"",
					cur_key:queue_details.k//当前排队顾客之前的排队数
				},
				created: function () {
					this.init();
				},
				methods:{
					init: function () {
						//首页
						if (pageflag == 2) {
							common_ajax(1, {"q_id":queue_details.v.q_id,"sn":queue_details.v.sn}, "queue_info", function(res) {
								$("header .header_title").text(app.b_lg['1457']);
								if (res.status == 1) {
									app.detailsObj = res.result.info;
									if (app.detailsObj.status == 1) {
										app.btnWidth = app.detailsObj.mobile.length == 0?"100%":"48%";
										var list = JSON.parse(getItem("queue_set_list"));
										$.each(list, function(i,v) {
											if (queue_details.v.q_id == v.id) {
												app.count1 = v.count1;
												app.count2 = v.count2;
												app.name = v.name;
											}
										});
									}else {
										var btnArray = [app.b_lg['1049'],app.b_lg['1008']];
										mui.confirm(app.b_lg['1487'],app.b_lg['1320'], btnArray, function(ee) {
											if(ee.index == 0) {
												//确定
												backpre();
											}else {
												backpre();
											}
										},"div")
									}
								}else {
									mui.toast(res.msg)
								}
							})
						}else if (pageflag == 4) {
							common_ajax(1, {"id":queue_details.v.id}, "get_queue_log_info", function(res) {
								var queue_set_list = getItem("queue_set_list");
								$.each(JSON.parse(queue_set_list), function(i,v) {
									if (v.id == queue_details.v.q_id) {
										app.q_id = true;
									}else {
										app.q_id = false;
									}
								});
								$("header .header_title").text(app.b_lg['1457']);
								if (res.status == 1) {
									app.detailsObj = res.result.info;
									if (app.detailsObj.status == 2 || app.detailsObj.status == 3) {
										app.btnWidth = app.detailsObj.mobile.length == 0?"100%":"45%";
										var list = JSON.parse(getItem("queue_set_list"));
										$.each(list, function(i,v) {
											if (queue_details.v.q_id == v.id) {
												app.count1 = v.count1;
												app.count2 = v.count2;
												app.name = v.name;
											}
										});
									}else{
										var btnArray = [app.b_lg['1049'],app.b_lg['1008']];
										mui.confirm(app.b_lg['1487'],app.b_lg['1320'], btnArray, function(ee) {
											if(ee.index == 0) {
												//确定
												backpre();
											}else {
												backpre();
											}
										},"div")
									}
								}else {
									mui.toast(res.msg)
								}
							})
							
						}
						
					},
					gotoart: function (e) {
						clicked(e)
					},
					//叫号
					callNumber: function (id,sn,v) {
						common_ajax(1, {"q_id":id}, "get_queue_list", function(res) {
							if (res.status == 1) {
								var num = 0;
								var str = "";
								$.each(res.result.list, function(i,v) {
									if (i>Number(app.cur_key) && v.openid) {
										str = str + "," + v.sn;
										num ++;
										if (num == 3) {
											str = str.substr(1,str.length)
											return false;
										}
									}
								});
								common_ajax(1,{"q_id":id,"sn":sn,"sn_list":str}, "call_queue", function(res) {
									if (res.status == 1) {
										//排队列表
										//音频播放器
										var objauiod={},//声音对象
										    arrauido=[],//声音数组
										    auidoch="?001"//清除缓存
										function auidoplays(arr){
											var lgsrc="../audio/";//路径
											//匹配语言
											switch (getItem("lg")){
												case "zh":
													lgsrc+="zh/";
													break;
												case "en":
													lgsrc+="en/";
													break;
												default:
													lgsrc+="en/";
													break;
											}
											//暂停原有音频
											$.each(arrauido, function(i,v) {
												objauiod[i].pause();
											});	
											arrauido=[];//清空
											objauiod={};//清空
											//音频播放
											//arrauido=[lgsrc+"dingdong.mp3","../audio/a.mp3","../audio/b.mp3","../audio/c.mp3","../audio/yongcan.mp3"];
											//插入叮咚
											arrauido.push(lgsrc+"dingdong.mp3"+auidoch);
											//插入字母
											var	ens=arr.letter.toLowerCase();
												arrauido.push(lgsrc+ ens +".mp3"+auidoch);
											//遍历插入数字
											var arrs=arr.sn_text.split("");
											$.each(arrs, function(i,v) {
												arrauido.push(lgsrc+ v +".mp3"+auidoch);
											});
											//插入请用餐；
											arrauido.push(lgsrc+"yongcan.mp3"+auidoch);				
											
											//载入对象
											$.each(arrauido, function(i,v) {
												objauiod[i]=new Audio(v);
											});	
											//遍历监听播放下一个
											$.each(arrauido, function(i,v) {				
												if(i<arrauido.length){
													objauiod[i].addEventListener("ended",function(){
														if(objauiod[i+1]!=undefined){
															objauiod[i+1].play();
														}					 	
													})
												}				
											});
											objauiod[0].play();//播放数组里第一个音频
										}
					
										auidoplays(v)
										app.init();
									}
								})
							}
						})
					},
					//用餐
					dinner: function (q_id,id,sn,v) {
						var btnArray = [app.b_lg['1049'],app.b_lg['1008']];
						mui.confirm(app.b_lg['1480'],app.b_lg['1320'],btnArray, function(ee) {
							if(ee.index == 1) {
												//确定
								if (pageflag == 2) {
									common_ajax(1,{"q_id":q_id,"sn":sn,"status":2}, "set_queue", function(res) {
										if (res.status == 1) {
											app.init();
					
										}else {
											mui.toast(res.msg)
										}
									})
								}else if (pageflag == 4) {
									common_ajax(1,{"id":id}, "put_queue_log_eating", function(res) {
										if (res.status == 1) {
											app.init();
										}else {
											mui.toast(res.msg)
										}
									})
								}
							}
						},"div")
						
					},
					//过号
					passNumber: function (q_id,id,sn,v) {
						var btnArray = [app.b_lg['1049'],app.b_lg['1008']];
						mui.confirm(app.b_lg['1482']+" " + v.letter+v.sn_text+ " " +app.b_lg['1483'],app.b_lg['1320'],btnArray, function(ee) {
							if(ee.index == 1) {
								common_ajax(1,{"q_id":q_id,"sn":sn,"status":3}, "set_queue", function(res) {
									if (res.status == 1) {
										app.init();
									}else {
										mui.toast(res.msg)
									}
								})
							}
						})
					},
					//撤销
					revocation: function (id,v) {
						var btnArray = [app.b_lg['1049'],app.b_lg['1008']];
						mui.confirm(app.b_lg['1482']+v.letter+v.sn_text+app.b_lg['1484'], app.b_lg['1320'], btnArray, function(ee) {
							if(ee.index == 1) {
								//确定
								common_ajax(1,{"id":id}, "put_queue_log_recall", function(res) {
									if (res.status == 1) {
										//排队列表
										backpre();
									}else {
										mui.toast(res.msg)
									}
								})
							}
						},"div")
						
					},
					choose: function (ele) {
						var _this = ele.currentTarget;
//						$(_this).addClass("fff bg-red9")
					},
					//打印
					printPage: function (q_id,sn) {
						common_ajax(1,{"q_id":q_id,"sn":sn}, "send_queue_print", function(res) {
							if (res.status == 1) {
								mui.toast(app.b_lg['1488'])
							}else{
								mui.toast(res.msg)
							}
						})
					}
				}
			})
		}
	</script>
</html>
